<script lang="ts" setup>
import { computed } from 'vue'
interface Props {
  Soc?: string
}
const props = withDefaults(defineProps<Props>(), {
  Soc: '0',
})
const levelCount = computed(() => {
  // 计算格数，小数部分也要保留
  return (+props.Soc / 100) * 5
})
</script>

<template>
  <div class="battery" flex items-center>
    <div class="battery-body">
      <span class="battery-Soc">SOC:{{ Soc }}%</span>
      <div
        class="battery-Soc-level"
        v-for="(item, index) in Math.floor(levelCount)"
        :key="'full-' + index"
      />
      <div
        v-if="levelCount % 1 !== 0"
        class="battery-Soc-level partial-level"
        :style="{ width: ((levelCount % 1) * 60) / 7.5 + 'vw' }"
      />
    </div>
    <div class="battery-head" />
  </div>
</template>

<style scoped lang="scss">
.battery {
  position: relative;

  .battery-body {
    width: 378px;
    height: 212px;
    background: #ffffff;
    border: 16px solid #051127;
    border-radius: 32px;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .battery-Soc {
      font-size: 32px;
      line-height: 38px;
      color: #010d25;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 999;
    }

    .battery-Soc-level {
      z-index: 100;
      height: 100%;
      background: #a2cbb3;
      width: 60px;
      border-radius: 5px;
    }

    .battery-Soc-level + .battery-Soc-level {
      margin-left: 10px;
    }

    /* 用来表示部分格子的样式 */
    .partial-level {
      background: #a2cbb3;
      border-radius: 5px;
      margin-left: 10px;
    }
  }

  .battery-head {
    width: 15px;
    height: 57px;
    background: #051127;
    border-radius: 0px 16px 16px 0px;
  }
}
</style>
